<template>
	<view>
		<view class="card">
			<view class="title">
				<text>问题类别</text>
			</view>
			<view class="tab">
				<view class="tab-item " :class="{'tab-active':item.id == cateItem.id && cateItem}" v-for="(item,index) in cateList" :key="index" @click="selectItemFun(item)">
					<text>{{item.value}}</text>
				</view>
			</view>
			
			<view class="title u-m-t-60">
				<text>填写内容</text>
			</view>
			<view class="m-textarea">
				<textarea v-model="content" cols="30" rows="10" placeholder="请输入您要反馈的内容" placeholder-style="font-size:24rpx;color:#999999;"></textarea>
			</view>
			
			<view class="image">
				<view class="image-item" v-for="(item,index) in imageList" :key="index">
					<view class="image-del" @click="delImageFun(index)">
						<u-icon name="close" :size="20"></u-icon>
					</view>
					<image :src="item" mode="aspectFill"></image>
				</view>
				<view class="image-upload" @click="selectFileFun" v-if="imageList.length < 6">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
			
			<view class="m-cell u-m-t-60">
				<view class="m-cell-label">
					<text>手机号</text>
				</view>
				<view class="m-cell-input">
					<input type="number" v-model="phone" placeholder="请输入您的手机号" maxlength="11" placeholder-style="font-size:24rpx;color:#999999;">
				</view>
			</view>
		</view>
		
		<view class="m-btn" @click="submitFun">
			<text>提交反馈</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateList:[],
				cateItem:{id:0},
				cateId:0,
				content:'',
				imageList:[]
			}
		},
		onLoad() {
			this.getCateFun()
		},
		methods: {
			submitFun(){
				if(!this.content){
					this.$m.msg('请填写反馈内容')
					return false;
				}
				this.$u.debounce(()=>{
					this.$http.getJson('index_feedback',{
						title:this.cateItem.value,
						images:this.imageList.join(','),
						content:this.content
					}).then(res=>{
						if(res.code == 1){
							this.$m.msg('反馈成功')
							setTimeout(()=>{
								this.to_back()
							},1500)
						}else{
							this.$m.msg(res.message)
						}
					})
				})
			},
			selectItemFun(item){
				this.cateItem = item
			},
			selectFileFun(){ 
				let that = this
				uni.chooseImage({
					count:1,
					sizeType:['compressed'],
					success:function(e){
						console.log(e);
						let file = e.tempFilePaths[0]
						that.$http.getUpload('index_upload',file,{},'img').then(res=>{
							if(res.code == 1){
								that.imageList.push(res.image)
							}else{
								that.$m.msg(res.message)
							}
						})
					},
					fail:function(e){
						console.log(e,'选择图片error');
					}
				})
			},
			delImageFun(index){
				this.imageList.splice(index,1)
			},
			getCateFun(){
				let data = ['投诉','建议','其他']
				let list = []
				data.forEach((item,index)=>{
					list.push({id:index,value:item})
				})
				this.cateItem = list[0] 
				this.cateList = list
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f6f6f6;
}

.card{
	background: #fff;
	width: 700rpx;
	margin-left: 25rpx;
	margin-top: 25rpx;
	padding: 40rpx 20rpx 80rpx;
	border-radius: 12rpx;
	.title{
		font-size: 30rpx;
		color: #34302D;
		font-weight: 800;
		line-height: 40rpx;
		margin-bottom: 25rpx;
	}
	.tab{
		display: flex;
		flex-wrap: wrap;
		.tab-item{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 72rpx;
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #DDDDDD;
			font-size: 24rpx;
			color: #34302D;
			margin-right: 20rpx;
		}
		.tab-active{
			border-color: #D3A358;
			background: #D3A358;
			color: #fff;
		}
	}
	
	.m-textarea{
		width: 100%;
		height: 200rpx;
		background: #F6F6F6;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 20rpx;
		font-size: 26rpx;
		textarea{
			width: 100%;
			height: 100%;
		}
	}
	
	.image{
		display: flex;
		flex-wrap: wrap;
		padding-top: 60rpx;
		.image-item{
			position: relative;
			width: 150rpx;
			height: 150rpx;
			margin-right: 15rpx;
			.image-del{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30rpx;
				height: 30rpx;
				background: rgba(#000,0.4);
				border-radius: 50%;
				color: #fff;
				text-align: center;
				line-height: 30rpx;
				font-size: 28rpx;
			}
			image{
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
		.image-upload{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 150rpx;
			height: 150rpx;
			background: #F4F4F4;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			color: #CACACA;
		}
	}
	
	.m-cell{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 104rpx;
		background: #F4F4F4;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 0 25rpx;
		.m-cell-label{
			font-size: 26rpx;
			color: #34302D;
		}
		.m-cell-input{
			flex: 1;
			height: 100%;
			input{
				width: 100%;
				height: 100%;
				text-align: right;
			}
		}
	}
}

.m-btn{
	width: 700rpx;
	height: 104rpx;
	background: #D3A358;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	margin-left: 25rpx;
	margin-top: 250rpx;
	margin-bottom: 100rpx;
	font-size: 32rpx;
	color: #fff;
	text-align: center;
	line-height: 104rpx;
}
</style>
